<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05各种组件</title>
    <!--    引入echarts依赖包-->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 400px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

<script>
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.querySelector('.box'));

    // 指定图表的配置项和数据
    let option = {
        // 标题
        title: {
            text: 'ECharts 入门示例',
        },
        xAxis: {
            data: ['游戏', '电商', '教育', '医疗', '社交', '金融', '旅游']
        },
        yAxis: {},
        // 系列
        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20, 30]
            },
            {
                name: '销量2',
                type: 'line',
                data: [15, 30, 56, 20, 20, 30, 40]
            }
        ],
        // 提示框
        tooltip:{
            textStyle:{
                color:'red'
            }
        },
        // 系列切换组件
        legend:{
            data: ['销量', '销量2']
        },
        // 工具箱
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: { readOnly: false },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            },
            // 自定义工具箱的位置
            grid:{
                right:'10px',
                bottom:'10px',
                containLabel:true
            }
        },
        // 数据区域缩放
        dataZoom: {}
    };

    myChart.setOption(option)
</script>
